<template>
  <div>
    <a-card style="margin-top: 12px;">
      <div>
        <a-form-model layout="horizontal" :model="form" ref="queryForm" :labelCol="{span: 7}" :wrapperCol="{span: 17, offset: 0}">
          <div class="fold">
            <a-row>
              <a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <a-form-model-item
                  label="终端编号"
                  prop="terminalCode"
                >
                  <a-input v-model="form.terminalCode" />
                </a-form-model-item>
              </a-col>
              <a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <a-form-model-item
                  label="指令类型"
                  prop="type"
                >
                  <a-select allowClear show-search :filter-option="filterOption" v-model="form.type" :getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode}">
                    <a-select-option v-for="item in dict.type" :key="item.key" :value="item.value">{{item.title}}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <a-form-model-item
                  label="推送结果"
                  prop="status"
                >
                  <a-select allowClear v-model="form.status" :getPopupContainer="(triggerNode)=>{ return triggerNode.parentNode}">
                    <a-select-option v-for="item in dict.status" :key="item.key" :value="item.value">{{item.title}}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <a-form-model-item
                  label="推送人"
                  prop="createName"
                >
                  <a-input v-model="form.createName" />
                </a-form-model-item>
              </a-col>
              <a-col :xxl="6" :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <a-form-model-item
                  label="上报时间"
                  prop="createTime"
                >
                  <a-range-picker
                  :allowClear="false"
                  :ranges="{ 今天: [moment(), moment()], '本月': [moment().startOf('month'), moment().endOf('month')] }"
                  v-model="form.createTime" :format="format" :valueFormat="format" style="width: 100%" :placeholder="['开始时间', '结束时间']" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row type="flex" justify="end">
              <a-button @click="submitForm" type="primary">查询</a-button>
              <a-button @click="resetForm" style="margin-left: 8px">重置</a-button>
            </a-row>
          </div>
        </a-form-model>
      </div>
    </a-card>
    <a-card style="margin-top: 12px;">
       <a-row>
         <a-col :xxl="4" :lg="4" :class="[isFold ? 'animation fold-tree': 'animation', isFold ? '' : 'padding-right-12']">
           <a-spin :spinning="treeLoading">
             <div style="min-height: 600px;overflow-y: auto;overflow-x: hidden;">
               <a-tree
                 :show-icon="true"
                 :show-line="false"
                 :tree-data="organizationTreeData"
                 :expandedKeys.sync="expandedKeys"
                 @select="onClickTreeNode"
               >
                <template slot="title" slot-scope="item">
                  <span v-if="item.type == 0"><a-icon type="bank" /> {{item.customTitle}} </span>
                  <span v-else-if="item.type == 1"><a-icon type="shop" /> {{item.customTitle}} </span>
                  <span v-else-if="item.type == 2"><a-icon type="apartment" /> {{item.customTitle}} </span>
                  <span v-else><a-icon type="question-circle" /> {{item.customTitle}} </span>
                </template>
               </a-tree>
             </div>
           </a-spin>
         </a-col>
         <a-col :xxl="20" :lg="20" :class="isFold ? 'animation fold-table': 'animation'">
           <div>
             <div>
               <a-button class="space-vertical" @click="foldAction">{{isFold ? `展开` : `折叠`}}</a-button>
               <a-button class="space-vertical" @click="exportAction" type="primary" v-auth="`logDevice:logDeviceConnect:query`">导出</a-button>
             </div>
             <standard-table
               ref="table"
               :size="`middle`"
               :page="page"
               :pageSize="pageSize"
               :total="total"
               :loading="loading"
               :columns="columns"
               :dataSource="dataSource"
               @onPageChange="onPageChange"
             >
             <div slot="type" slot-scope="{text}">
               <span>{{text | dictFilter(dict.type)}}</span>
             </div>
             <div slot="status" slot-scope="{text}">
               <a-badge :status="text == 1 ? 'success' : 'error'" :text="text | dictFilter(dict.status)"/>
             </div>
           </standard-table>
         </div>
       </a-col>
     </a-row>
     </a-card>
  </div>
</template>

<script>
import StandardTable from '@/components/table/standard-table'
import moment from 'moment'
import {logDevicePushService} from '@/services'

const columns = [
  {
    title: '序号',
    dataIndex: 'no',
    width: 80,
    scopedSlots: { customRender: 'no' }
  },
  {
    title: '所属机构',
    dataIndex: 'organizationName',
    width: 150
  },
  {
    title: '指令类型',
    dataIndex: 'type',
    width: 150,
    scopedSlots: { customRender: 'type' },
    ellipsis: true
  },
  {
    title: '终端编号',
    dataIndex: 'terminalCode',
    width: 150,
    ellipsis: true
  },
  {
    title: '推送参数',
    dataIndex: 'params',
    width: 300,
    ellipsis: true
  },
  {
    title: '推送结果',
    dataIndex: 'status',
    width: 80,
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '推送人',
    dataIndex: 'createName',
    width: 120
  },
  {
    title: '推送时间',
    dataIndex: 'createTime',
    width: 160
  },
]

export default {
  name: 'LogDevicePush',
  components: {StandardTable},
  data () {
    return {
      format: 'yyyy-MM-DD',
      isFold: false,
      loading: false,
      treeLoading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      columns: columns,
      dataSource: [],
      form: {
        terminalCode: undefined,
        type: undefined,
        status: undefined,
        createName: undefined,
        createTime: [moment().startOf('month').format('yyyy-MM-DD'), moment().endOf('month').format('yyyy-MM-DD')],
        organizationId: undefined
      },
      dict: {
        type: [],
        status: []
      },
      organizationTreeData: [],
      expandedKeys: []
    }
  },
  filters: {
    dictFilter: (val, dictList) => {
      const dict = dictList.find(item => item.value == val)
      return dict ? dict.title : '未知'
    }
  },
  authorize: {
    exportAction: 'logDevice:logDeviceConnect:export'
  },
  methods: {
    moment,
    foldAction() {
      this.isFold = !this.isFold
    },
    reloadTable() {
      this.page = 1
      this.queryListAction()
    },
    onClickTreeNode(selectedKeys) {
      this.form.organizationId = selectedKeys[0]
      this.reloadTable()
    },
    onPageChange(pagination) {
      this.page = pagination.current
      this.pageSize = pagination.pageSize
      this.queryListAction()
    },
    resetForm() {
      this.$refs.queryForm.resetFields()
      this.form.createTime = [moment().startOf('month').format('yyyy-MM-DD'), moment().endOf('month').format('yyyy-MM-DD')]
      this.reloadTable()
    },
    submitForm() {
      this.reloadTable()
    },
    exportAction() {
      this.$message.success('敬请期待!')
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.indexOf(input) >= 0
      )
    },
    queryListAction() {
      this.loading = true
      const params = {
        page: this.page,
        pageSize: this.pageSize,
        queryParams: this.form
      }
      logDevicePushService.queryList(JSON.stringify(params)).then(res => {
        const result = res.data
        if (result.code === 200) {
          this.dataSource = []
          this.dataSource = result.data.records
          this.total = result.data.totalCount
        }
      }).finally(this.loading = false)
    },
    queryOrganizationAction() {
      this.treeLoading = true
      logDevicePushService.queryOrganizationTree().then(res => {
        const result = res.data
        if (result.code === 200) {
          this.organizationTreeData = result.data
          this.expandedKeys = []
          this.expandAllTreeNode(this.organizationTreeData, this.expandedKeys)
        }
      }).finally(this.treeLoading = false)
    },
    expandAllTreeNode(originData, targetData) {
      originData.forEach(item => {
        targetData.push(item.key)
        if (item.children && item.children.length > 0) {
          this.expandAllTreeNode(item.children, targetData)
        }
      })
    }
  },
  created() {
    this.getDict(JSON.stringify({code: 'TERMINAL_COMMAND_TYPE'})).then(res => this.dict.type = res.data.data)
    this.getDict(JSON.stringify({code: 'SYS_OPERATION_RESULT'})).then(res => this.dict.status = res.data.data)
    this.queryOrganizationAction()
    this.reloadTable()
  }
}
</script>
<style scoped lang="less">
  .ant-form-item {
    margin-bottom: 12px;
  }
  .fold{
    width: calc(100% - 12px);
    display: inline-block;
  }
  @media screen and (max-width: 900px) {
    .fold {
      width: 100%;
    }
  }
  .animation {
    transition: 0.5s;-webkit-transition: 0.5s;
  }
  .fold-tree {
    width: 0%;
  }
  .fold-table {
    width: 100%;
  }
</style>